/*
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-10-05 19:59:40
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-10-06 21:35:48
 * @FilePath: \react_staging\src\components\Header\index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { Component } from 'react'
import { nanoid } from 'nanoid'
import PropTypes from 'prop-types'
import './index.css'
export default class Header extends Component {
	//对接收的数据类型,必要性进行限制
	static propTypes = {
		addTo: PropTypes.func.isRequired,
	}
	//键盘事件回调
	handleKeyUp = (event) => {
		//解构赋值获取keycode,target
		const { key, target } = event
		// if(event.keyCode!=13) return
		//判断按下的是否是回车键
		if (key !== 'Enter') return
		//输入的名字不能为空
		if (target.value.trim() === '') {
			alert('输入的名字不能为空!')
			return
		}
		//准备号一个todoObj对象
		const todoObj = {
			id: nanoid(),
			title: target.value,
			done: false,
		}
		//将todoObj传递给App
		this.props.addTo(todoObj)
		//清空输入框
		target.value = ''
	}
	render() {
		return (
			<div className="todo-header">
				<input
					onKeyUp={this.handleKeyUp}
					type="text"
					placeholder="请输入你的任务名称，按回车键确认"
				/>
			</div>
		)
	}
}
